<template>
  <f7-page
    name="search"
    color-theme="red"
    class="backgroundColor"
    style="overflow:hidden"
    @page:afterin="pageAfterin"
  >
    <div class="outter_box">
      <!-- 搜索栏 -->
      <ul class="searchBar_box">
        <li class="li_l">
          <f7-button @click.stop="$f7router.back()" style="display:flex;align-items:center">
            <svg-icon iconClass="back_icon_white" v-if="getThemeDark" />
            <svg-icon iconClass="back_icon" v-else />
          </f7-button>
        </li>
        <li class="li_m">
          <p class="search_box">
            <svg-icon iconClass="search_icon_white" v-if="getThemeDark" />
            <svg-icon iconClass="search_icon" v-else />
            <input
              ref="search_input"
              type="text"
              placeholder=""
              @input="changeDivShowIndex()"
              @focus="changeDivShowIndex()"
              @keyup.enter="search()"
              v-model="searchValue"
            />
            <f7-button v-if="searchValue" @click="clearSearchValue()">
              <svg-icon iconClass="cancel_icon_white" v-if="getThemeDark" />
              <svg-icon iconClass="cancel_icon" v-else />
            </f7-button>
          </p>
        </li>
        <li></li>
      </ul>

      <!-- 搜索历史记录 -->
      <div class="box initial_box" v-if="!divShowIndex">
        <ul class="history_box">
          <li class="ht_l titleColor">历史</li>
          <li class="ht_m">
            <f7-button v-for="(item, index) in historyData" :key="index" @click.stop="go_search(item.searchHistory)">
              <f7-chip :text="item.searchHistory" outline color="red"></f7-chip>
            </f7-button>
          </li>
          <li class="ht_r">
            <f7-button @click.stop="delHistory()" v-if="historyData.length">
              <svg-icon iconClass="ic_trash_white" v-if="getThemeDark" />
              <svg-icon iconClass="ic_trash" v-else />
            </f7-button>
          </li>
        </ul>
      </div>
      <!-- 推荐列表 -->
      <div class="box recommend_box" v-if="divShowIndex === 1">
        <ul style="margin:1vh 0;height:70vh;overflow-y:scroll">
          <li v-for="(item, index) in recommendData" :key="index">
            <svg-icon iconClass="search_icon_white" v-if="getThemeDark" />
            <svg-icon iconClass="search_icon" v-else />
            <f7-button>
              <span class="recommend-span link" @click.stop="go_search(item.name)">{{ item.name }}</span>
            </f7-button>
          </li>
        </ul>
      </div>
      <!-- 搜索结果列表 -->
      <div class="box result_box " v-show="divShowIndex === 2">
        <f7-toolbar tabbar position="top" class="backgroundColor">
          <f7-link tab-link="#searchTab-1" tab-link-active @click="changeTab(0)">歌名</f7-link>
          <f7-link tab-link="#searchTab-2" @click="changeTab(1)">歌手</f7-link>
        </f7-toolbar>
        <f7-tabs>
          <f7-tab id="searchTab-1" class="page-content" tab-active>
            <f7-block>
              <v-songCatalog :key="'name'+componentKey1" :searchContent="queryData.content" :searchType="queryData.type" :listHeight="'54vh'" :from="'search'" :tRef="'0'" :id="'search0'"/>
            </f7-block>
          </f7-tab>
          <f7-tab id="searchTab-2" class="page-content">
            <f7-block>
              <v-songCatalog :key="'singer'+componentKey2" :searchContent="queryData.content" :searchType="queryData.type" :listHeight="'54vh'" :from="'search'" :tRef="'1'" :id="'search1'"/>
            </f7-block>
          </f7-tab>
          
        </f7-tabs>

        <!-- <f7-card outline>
          <f7-card-header class="backgroundSubColor">
            <p style="font-weight:600;font-size:18px;" class="titleColor">
              单曲
            </p>
          </f7-card-header>

          <f7-card-content class="backgroundSubColor">
            <f7-list>
              <f7-list-item
                link="/playerInfo/"
                @click.stop="handleLink(item, index)"
                class="spanColor"
                :title="item.name"
                :footer="item.singer"
                v-for="(item, index) in resultData"
                :key="index"
              >
              </f7-list-item>
            </f7-list>
            <div
              v-if="!resultData.length"
              style="position:absolute;top:0;left:0;width:100%;text-align:center;margin:0.5rem 0"
            >
              <span style="font-size:16px;" class="spanColor">无搜索结果</span>
            </div>
          </f7-card-content>
        </f7-card> -->
      </div>
    </div>
    <!-- footer -->
    <div class="footer_box">
      <v-playerBar :hasMusicList="getPageGradation >=1?true:false" from="search" />
    </div>
  </f7-page>
</template>
<script>
import {
  getSearchHistory,
  getSongs,
  fuzzySearch,
  delSearchHistory,
} from '@/api/index.js'
import { mapGetters, mapActions } from 'vuex'
import SongCatalog from '@/components/songcatalog.vue'
import axios from 'axios'
import PlayerBar from '@/components/playerbar.vue'
import {debounce} from '@/utils/index.js'
export default {
  components:{
    'v-songCatalog':SongCatalog,
    'v-playerBar': PlayerBar,
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      getThemeDark: 'getThemeDark',
      getPageGradation:'getPageGradation',
    }),
    reverseHistoryData(){
      return this.historyData.reverse();
    }
  },
  data() {
    return {
      searchValue: '',
      divShowIndex: 0,
      queryData: {
        content: '',
        type: 'name', //name|singer
        from: 0,
        size: 40,
        // songList:'歌单名',
      },
      resultData: [],
      historyData: [],
      recommendData: [],
      componentKey1:0,
      componentKey2:0,
      searchTab:0
    }
  },
  methods: {
    ...mapActions({
      playMust: 'playMust',
      sendMusic: 'sendMusic',
      sendandchangeMusic: 'sendandchangeMusic',
      changePageGradation:'changePageGradation',
    }),
    pageAfterin(){
      this.changePageGradation(1);
    },
    changeTab(tabType){
      this.searchTab = tabType;
      if (tabType === 0){
        this.queryData.type = 'name'
        this.componentKey1++;
      }
      else {
        this.queryData.type = 'singer'
        this.componentKey2++;
      }
      
    },
    handleLink(item, index) {
      this.sendandchangeMusic(item)
      this.playMust()
      // this.$f7ready((f7) => {
      //   f7.views.main.router.navigate('/playerInfo/');
      // })
    },
    searchData() {
      this.queryData.content = this.searchValue
      getSongs(this.queryData)
        .then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.resultData = res.data.result
          } else {
            console.log(res.code)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    searchHistory() {
      getSearchHistory({ userId: this.getUserInfo.userid })
        .then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.historyData = res.data.logList
          } else {
            console.log(res.code)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    delHistory() {
      delSearchHistory({ userId: this.getUserInfo.userid })
        .then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.historyData = []
          } else {
            console.log(res.code)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    clearSearchValue() {
      this.searchValue = ''
      //清空搜索框文字后，如果处在推荐列表页面的话，需要返回搜索结果页
      this.divShowIndex = 2
    },
    changeDivShowIndex() {
      console.log('------- changeDivShowIndex -------')
      if (this.searchValue === '') {
        this.divShowIndex = 0
        this.searchHistory()
      } else {
        this.divShowIndex = 1
        this.blurSearch();
      }
    },
    blurSearch:debounce(function () {
      
      let blurData ={
        content: '',
        from: 0,
        size: 40,
      }
      blurData.content = this.searchValue
      fuzzySearch(blurData)
        .then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.recommendData = res.data.result
          } else {
            console.log(res.code)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },500),
    go_search(searchContent){
      this.searchValue = searchContent
      this.search(); 
    },
    search() {
      console.log('------- search -------')
      this.divShowIndex = 2
      // this.searchData()
      this.queryData.content = this.searchValue
      if (this.searchTab === 0){
        this.componentKey1++;
      }
      else {
        this.componentKey2++;
      }
      this.$refs.search_input.blur()
    },
  },
  mounted() {
    this.$refs.search_input.focus()
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .result_box{
  $spanColor:#212121;
  $spanSmallColor:#ff3b30;
  /deep/ .tab-link{
    color:$spanColor;
  }
  /deep/ .tab-link.tab-link-active{
    color:$spanSmallColor;
  }
}
.dark .result_box{
  $spanColor:#ffffff;
  $spanSmallColor:#ff3b30;
  /deep/ .tab-link{
    color:$spanColor;
  }
  /deep/ .tab-link.tab-link-active{
    color:$spanSmallColor;
  }
}
.light .search_box {
  $spanColor: #212121;
  /deep/ input {
    color: $spanColor;
  }
}
.dark .search_box {
  $spanColor: #ffffff;
  /deep/ input {
    color: $spanColor;
  }
}
.light .result_box {
  $spanColor: #212121;
  /deep/ .item-inner {
    &::before {
      color: $spanColor;
    }
  }
  /deep/ .item-title {
    color: $spanColor;
    .item-footer {
      color: $spanColor;
    }
  }
}
.dark .result_box {
  $spanColor: #ffffff;
  /deep/ .item-inner {
    &::before {
      color: $spanColor;
    }
  }
  /deep/ .item-title {
    color: $spanColor;
    .item-footer {
      color: $spanColor;
    }
  }
}
.footer_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index:1000;
}
.outter_box {
  position: relative;
  .searchBar_box {
    height: 0.4rem;
    line-height: 0.3rem;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    margin: 0.1rem 0;
    .li_l {
      width: 12vw;
      display:flex;
      align-items: center;
      .svg-icon {
        width: 0.25rem;
        height: 0.25rem;
      }
      .button {
        display: flex;
        align-items: center;
      }
    }
    .li_m {
      display: flex;
      align-items: center;
      p {
        margin: 0 4vw 0 0;
        width: 80vw;
      }
    }
  }
  .search_box {
    height: 0.3rem;
    border: 1px #ccc solid;
    border-radius: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      border: none;
      flex: 1;
    }
    .svg-icon {
      margin: 0 0.1rem;
      width: 0.15rem;
      height: 0.15rem;
    }
    
  }

  .box {
    height: 74vh;
  }
  .history_box {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-top: 0.2rem;
    .ht_l {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      font-size: 18px;
      font-weight: 600;
      margin-right: 0.1rem;
      margin-left: 0.1rem;
      height: 0.3rem;
    }
    .ht_m {
      flex: 1;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      margin-right: 0.1rem;
      height: 0.3rem;
      .button {
        display: contents;
      }
      .chip {
        height: 0.25rem;
        margin-right: 0.1rem;
      }
    }
    .ht_r {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      margin-right: 0.1rem;
      height: 0.3rem;
      .button {
        display: flex;
        align-items: center;
      }
      .svg-icon {
        height: 0.25rem;
      }
    }
  }
  .recommend_box {
    ul {
      padding-left: 0.2rem;
    }
    li {
      display: flex;
      align-items: center;
      margin-bottom: 0.1rem;
      .svg-icon {
        height: 0.22rem;
        width: 0.22rem;
        margin-right: 0.1rem;
      }
      .button {
        flex: 1;
        text-align: left;
        .recommend-span {
          text-decoration: underline;
          font-size: 17px;
        }
      }
    }
  }
  .result_box {
    .tab{
      padding:0;
    }
    .card {
      margin: 0.1rem;
      height: 70vh;
      overflow: hidden;
      .card-header {
        height: 10vh;
      }
      .card-content {
        height: 75vh;
        overflow: hidden;
        .list {
          overflow-y: scroll;
          height: 75vh;
        }
      }
    }
  }
}
</style>
